<template>
  <div class="image-wrapper">
    <!-- 头 -->
    <div class="top">
      <!-- 头左 -->
      <div class="left">
        <el-select size="small" v-model="order">
          <el-option value="desc" label="降序"></el-option>
          <el-option value="asc" label="升序"></el-option>
        </el-select>
        &nbsp;

        <el-input
          size="small"
          style="width: 200px"
          placeholder="请输入图片名称"
        ></el-input>
        &nbsp;

        <el-button size="small" type="success">搜索</el-button>
      </div>
      <!-- 头→ -->
      <div class="right">
        <el-button
          size="small"
          type="success"
          @click="
            model = { order: 0 };
            $refs.d.show();
          "
          >创建相册</el-button
        >
        <el-button size="small" type="warning">查看图片</el-button>
      </div>
    </div>
    <!-- 中 -->
    <div class="scroll-list" v-loading="queryloading">
      <ImageItem
        @edit="
          model = { ...$event };
          $refs.d.show();
        "
        @delete="delImageclass(item)"
        @click="search"
        v-for="item in list"
        :key="item.id"
        :item="item"
        :activeId="activeId"
      />
    </div>
    <!-- 分页 -->
    <footer class="page">
      <div class="left">
        <el-button-group>
          <el-button
            size="small"
            :disabled="pagenum === 1"
            @click="
              pagenum--;
              getList();
            "
            >上一页</el-button
          >
          <el-button
            size="small"
            :disabled="pagenum === pages"
            @click="
              pagenum++;
              getList();
            "
            >下一页</el-button
          >
        </el-button-group>
      </div>
      <div class="right"></div>
    </footer>

    <DF
      :opts="opts"
      v-model="model"
      :title="title"
      ref="d"
      @confirm="confirm"
    />
  </div>
</template>

<script>
import ImageItem from "./components/ImageItem";
import { getImagelist, updataImage, addImage, delImage } from "api/home";
export default {
  components: { ImageItem },
  name: "images",
  data() {
    return {
      /**
       * 模型
       */
      model: {},
      /**
       * 表单配置想
       */
      opts: {
        name: {
          title: "相册名称",
          required: true,
          max: 20,
          ph: "请输入相册名称",
        },
        order: {
          title: "相册排序",
          tag: "number",
          min: 0,
        },
      },
      /**
       * 升降
       */
      order: "desc",
      /**
       * 总条数
       */
      total: 0,
      /**
       * 页数
       */
      pagenum: 1,
      /**
       * 激活iD
       */
      activeId: 0,
      
      pages: 1,
    };
  },
  methods: {
    /**
     * 删除
     */
    async delImageclass(item){
      let res;
      try {
        res = await this.$confirm(`您确定要删除${item.name}吗`)
        await delImage(item.id)
        this.$m.success("删除成功")
        this.getList()
      } catch (error) { }
      res && res()
    },
    /**
     * 提交
     */
    async confirm() {
      const dd = this.$refs.d;
      try {
        console.log(111);
        dd.start();
        await (this.model.id ? updataImage : addImage)(this.model);
        this.$m.success(this.title + "成功");
        this.getList();
        dd.hide();
      } catch (error) {}
      dd.stop();
    },
    /**
     * 搜索
     */
    async search(item) {
      this.activeId = item.id;
    },
    /**
     * 获取图片列表
     */
    async getList() {
      try {
        this.queryloading = true;
        const { list, totalCount } = await getImagelist(this.pagenum);
        this.list = list;
        this.total = totalCount;
        this.pages = Math.ceil(totalCount / 10);
      } catch (error) {}
      this.queryloading = false;
    },
  },
  created() {
    this.getList();
  },
  computed: {
    /**
     * 标题
     */
    title() {
      return this.model.id ? "修改相册" : "添加相册";
    },
  },
};
</script>

<style lang="scss" scoped>
.image-wrapper {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  .page {
    height: 50px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border-color);
    .left {
      width: 200px;
      height: 100%;
      border-right: 1px solid var(--border-color);
      line-height: 50px;
      text-align: center;
    }
    .right {
      flex: 11;
    }
  }

  .top {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
  }

  .scroll-list {
    height: 500px;
    width: 200px;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
  }
}
</style>